<template>
  <div class="choose">
    <el-dialog
      title="选择评论区内容"
      :visible.sync="isChoose"
      width="40%"
      :before-close="cancel">
      <div class="top">
        <search :search-items="searchItems" @on-search="searchBySearchItem"></search>
      </div>
      <div class="table">
        <el-table :data="commentsdata" stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="content" label="评论内容" align="center"></el-table-column>
        </el-table>
        <div class="pager-group">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, jumper, prev, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="success" @click="submit">确认</el-button>
          <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Search from '@/framework/components/search'
import PageMixin from '@/framework/mixins/pageMixin'
import {findWithAgent} from "@/project/service/barrage"

export default {
  name: "choose",
  mixins: [
    PageMixin,
  ],
  components:{ Search },
  props: {
    isChoose:{
      type: Boolean,
      default: () => {
        return false
      }
    },
  },
  data(){
    return{
      searchItems: [
        {name: '评论内容', key: 'commentsContent', type: 'string'}
      ],
      commentsdata:[
        {commentsContent:'666'},
        {commentsContent:'666'},
        {commentsContent:'666'},
        {commentsContent:'666'},
      ],
    }
  },
  created(){
    let param = {
      pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
    }
    this.search(param)
  },
  methods:{
    search(obj,type){
      findWithAgent(obj,data => {
        data.forEach(item => {
          item.id = item.id.toString()
        })
        this.commentsdata = data
      })
      if(type=='search'){
        this.$message.success('查询成功')
      }
    },
    //条件选择
    searchBySearchItem(res){
      let param = {
        barrage:{content:res.commentsContent},
        pageable:{page:this.page, size:this.pageSize, sort:"id", desc:true}
      }
      this.search(param,'search')
    },
    //表格行选择
    handleSelectionChange(row){
      console.log(row.commentsContent)
    },
    //确定
    submit(){
      this.cancel()
    },
    //取消
    cancel(){
      this.$emit('close',false);
    }
  }
}
</script>

<style  lang="less" scoped>
.pager-group{
  width:100%;
  margin: 20px 0;
}
</style>
